<template>
  <div>
    <el-dialog :title="info.isAdd?'添加秒杀':'编辑秒杀'" :visible.sync="info.isShow" :before-close="cancel" center>
      <el-form ref="seck" :model="seckInfo" :rules="rules">
        <el-form-item prop="title" label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 一级分类 -->
        <el-form-item prop="first_cateid" label="一级分类" :label-width="formLabelWidth">
          <el-select @change="changeSeck(false)" v-model="seckInfo.first_cateid" placeholder="请选择">
            <el-option disabled label="请选择分类" :value="0"></el-option>
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 二级分类 -->
        <el-form-item prop="second_cateid" label="二级分类" :label-width="formLabelWidth">
          <el-select v-model="seckInfo.second_cateid" placeholder="请选择">
            <el-option disabled label="请选择分类" :value="0"></el-option>
            <el-option
              v-for="item in secondArr"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品" :label-width="formLabelWidth">
          <el-select v-model="seckInfo.goodsid" placeholder="请选择商品">
            <el-option
              v-for="item in goodslist"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="seckInfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { seckadd, seckinfo, seckedit } from "../../request/api";
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      seckInfo: {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1
      },
      secondArr: [],
      specsArr: [],
      formLabelWidth: "120px",
      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8个字符", trigger: "blur" }
        ],
        first_cateid: [
          { required: true, message: "请选择一级分类", trigger: "change" }
        ],
        second_cateid: [
          { required: true, message: "请选择二级分类", trigger: "blur" }
        ]
      }
    };
  },
  props: ["info"],
  computed: {
    ...mapGetters({
      secklist: "seck/getSeck",
      catelist: "cate/getCate",
      goodslist: "goods/getGoods"
    })
  },
  methods: {
    ...mapActions({
      getSeck: "seck/getSeckActions",
      getCate: "cate/getCateAction",
      getGoods: "goods/getGoodsAction"
    }),
    changeSeck(n) {
      let index = this.catelist.findIndex(
        item => item.id == this.seckInfo.first_cateid
      );
      this.secondArr = this.catelist[index].children;
      if (!n) {
        this.seckInfo.second_cateid = "";
      }
    },
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },
    reset() {
      this.seckInfo = {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1
      };
      //清空表单验证
      this.$refs.seck.resetFields();
    },
    //数据回显：
    lookup(id) {
      seckinfo({ id }).then(res => {
        if (res.code == 200) {
          this.seckInfo = res.list;
          this.seckInfo.id = id;
          this.changeSeck(true);
        }
      });
    },
    //封装一个确定事件
    confirm() {
      this.$refs.seck.validate(val => {
        if (val) {
          //验证成功之后，分别调用添加或者编辑接口
          //添加
          if (this.info.isAdd) {
            seckadd(this.seckInfo).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.cancel();
                //重新渲染
                this.getSeck();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            seckedit(this.goodsinfo).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.cancel();
                this.getSeck();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    }
  },
  mounted() {
    if (this.catelist.length == 0) {
      this.getCate();
    }
    if (this.goodslist.length == 0) {
      this.getGoods();
    }
  }
};

</script>

<style  scoped>
</style>
